<template>
  <div class="container">
    <div class="app-container" style="padding: 20px;">
      <el-row class="header" style="font-size: 14px;">
        <span>一体杆名称：</span>
        <el-input
          v-model="searchForm.poleName"
          placeholder="请输入一体杆名称"
          size="mini"
          style="width: 180px; margin-right: 10px;"
        />
        <span>一体杆编号：</span>
        <el-input
          v-model="searchForm.poleNumber"
          placeholder="请输入一体杆编号"
          size="mini"
          style="width: 180px; margin-right: 10px;"
        />
        <span>运行状态：</span>
        <el-select
          v-model="searchForm.status"
          placeholder="请选择运行状态"
          size="mini"
          style="width: 180px; margin-right: 10px;"
        >
          <el-option label="正常" value="normal" />
          <el-option label="异常" value="abnormal" />
        </el-select>
        <el-button size="mini" type="primary" @click="searchPoles">查询</el-button>
        <el-button size="mini" type="success" @click="showAddPoleDialog">添加一体杆</el-button>
        <el-button size="mini" type="danger" @click="batchDelete">批量删除</el-button>
      </el-row>
      <el-divider />
      <el-table :data="polesList" style="width: 100%; margin-top: 20px;">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" label="一体杆名称" />
        <el-table-column prop="number" label="一体杆编号" />
        <el-table-column prop="ip" label="一体杆IP" />
        <el-table-column prop="area" label="安装区域" />
        <el-table-column prop="type" label="一体杆类型" />
        <el-table-column prop="status" label="运行状态" />
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="editPole(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deletePole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="totalPoles"
        :page-size="pageSize"
        style="text-align: right; margin-top: 20px;"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 添加/编辑一体杆对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="120px">
        <el-form-item label="一体杆名称">
          <el-input v-model="form.name" size="mini" />
        </el-form-item>
        <el-form-item label="一体杆编号">
          <el-input v-model="form.number" size="mini" />
        </el-form-item>
        <el-form-item label="一体杆IP">
          <el-input v-model="form.ip" size="mini" />
        </el-form-item>
        <el-form-item label="安装区域">
          <el-input v-model="form.area" size="mini" />
        </el-form-item>
        <el-form-item label="一体杆类型">
          <el-input v-model="form.type" size="mini" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="savePole">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        poleName: '',
        poleNumber: '',
        status: ''
      },
      polesList: [],
      totalPoles: 0,
      pageSize: 10,
      currentPage: 1,
      dialogVisible: false,
      dialogTitle: '添加一体杆',
      form: {
        id: '',
        name: '',
        number: '',
        ip: '',
        area: '',
        type: ''
      },
      selectedPoles: []
    }
  },
  created() {
    this.fetchPoles()
  },
  methods: {
    showAddPoleDialog() {
      this.dialogTitle = '添加一体杆'
      this.resetForm()
      this.dialogVisible = true
    },
    editPole(pole) {
      this.dialogTitle = '编辑一体杆'
      this.form = Object.assign({}, pole)
      this.dialogVisible = true
    },
    deletePole(id) {
      this.$confirm('确定要删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除一体杆的 API
        console.log('删除一体杆:', id)
      })
    },
    batchDelete() {
      if (this.selectedPoles.length === 0) {
        this.$message.warning('请选择至少一条记录进行删除')
        return
      }
      this.$confirm('确定要删除选中的记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用批量删除一体杆的 API
        console.log('批量删除一体杆:', this.selectedPoles)
      })
    },
    savePole() {
      // 调用保存一体杆的 API
      console.log('保存一体杆:', this.form)
      this.dialogVisible = false
    },
    resetForm() {
      this.form = {
        id: '',
        name: '',
        number: '',
        ip: '',
        area: '',
        type: ''
      }
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchPoles()
    },
    searchPoles() {
      // 调用搜索一体杆的 API
      console.log('搜索一体杆:', this.searchForm)
      this.fetchPoles()
    },
    fetchPoles() {
      // 调用获取一体杆列表的 API
      console.log('获取一体杆列表:', this.currentPage)
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.header {
  margin-bottom: 20px;
}
</style>
